<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>五子棋</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
		</style>
        <script src='js/jquery3.5.1.min.js'></script>
		<link rel='stylesheet' href='css/wzq.css' type='text/css'/>
		<script src='js/wzq.js'></script>
	</head>
	<body>
		<div id='box'>
			<h1>五子棋</h1>
			<div id='left'>
				<canvas width='700px'height='700px'></canvas>
			</div>
		    <div id='right'>
				<div class='show'></div>
				<h5>当前模式：<span>双人模式</span></h5>
				<h5>棋盘大小：<span>10</span>x<span>10</span></h5>
				<h5>先手：<span>黑棋</span></h5>
				<ul>
					<li>新游戏</li>
					<li>悔棋</li>
				</ul>
				<div class='show_2'>
					<span id='sspan'></span>落子
					<br>
					<h1></h1>
					<p></p>
				</div>
			</div>
			<div id='shade'></div>
			<div id='hint'>
			     <ul id='pattern'>
					 <li class='one'>双人模式</li>
					 <li>人机模式</li>
				 </ul>
				 <ul id='select'>
					 <li id='machine'>是否先手：<button class='one'>是</button>     <button class='two'>否</button></li>
					 <li id='double'>先手：<button class='one'>黑棋</button>   <button class='two'>白棋</button></li>
					 <li id='qipan'>棋盘大小：<input type='number' max='19'min='5' value='10'> </li>
				 </ul>
				 
				 <button id='play'>开始游戏</button>
			</div>
		
		</div>
	</body>
</html>
